<template lang="pug">
.pacs-history-caonclusion
  .pacs-history-caonclusion-search
    .pacs-history-caonclusion-search-row
      .centered-text 关联条件：
      el-radio-group(v-model="radioModel",:disabled="disabled",@change="handleQueryData") 
        el-radio(label="1") 门诊/住院号
        el-radio(label="2") 身份证号
        el-radio(label="3") 病人姓名
        el-radio(label="4") 病人编号
    .pacs-history-caonclusion-search-table
      SectionTitle 检查列表
      mt-table(
        v-bind="tableProps")
  .pacs-history-caonclusion-body
    SectionTitle 影像所见
    el-input(
      v-model="imageFindings"
      type="textarea"
      :rows="10"
      :autosize="false"
    )
    SectionTitle 诊断意见
    el-input(
      v-model="diagnosticOpinion"
      type="textarea"
      :rows="10"
      :autosize="false"
    )
</template>
<script setup lang="ts">
import { type TableProps, SectionTitle } from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
import {
  type RegistrationEntity,
  type RegistrationQueryParams,
  adviceColumns,
  ERegistrationColumnKey,
} from "@scmt/api-pacs-registration";

//添加 Props属性
const props = defineProps({
  selectItemTag: Object,
});
const editingObj = ref<null | RegistrationEntity>(null);
const selectTagRegistration = ref<null | RegistrationEntity>(null);
const radioModel = ref("1");
const disabled = ref(false);
const $api = useApi();
//历史结果
const registrationList = ref<Array<RegistrationEntity>>([]);
const tagList = ref([{ id: "", name: "", sex: "", age: "", type: "" }]);
//诊断意见
const diagnosticOpinion = ref("");
//影像所见
const imageFindings = ref("");
const queryPramas = reactive<RegistrationQueryParams>({
  pageNum: 1,
  pageSize: 20,
  registrationState: "7,8",
});
onMounted(() => {
  handleQueryData();
});
const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    let item = { outpatientNumber: "", idCard: "", name: "", patientId: "" };
    if (radioModel.value) {
      switch (radioModel.value) {
        case "1":
          item.outpatientNumber = editingObj?.value?.outpatientNumber ?? "";
          break;
        case "2":
          item.idCard = editingObj?.value?.idCard ?? "";
          break;
        case "3":
          item.name = editingObj?.value?.name ?? "";
          break;
        case "4":
          item.patientId = editingObj?.value?.patientId ?? "";
          break;
        default:
          break;
      }
    }
    const params = Object.assign(queryPramas, item, q);
    return $api.pacs.registration.queryRegistrationConclusionList(params);
  },
});
/**
 * 登记单 Tag 点击事件
 */
// const itemTagClick = (id: string) => {
//   tagList.value.forEach((item) => {
//     item.type = "info";
//   });
//   debugger
//   const filter = tagList.value.filter(i => id == i.id);
//   if (filter && filter.length > 0) {
//     filter[0].type = "";
//   }
//   const registrationfilter = registrationList.value.filter(i => id == i.id);
//   if (registrationfilter) {
//     selectTagRegistration.value = registrationfilter[0];
//   }
// }

//单选切换查询
const handleQueryData = () => {
  diagnosticOpinion.value = "";
  imageFindings.value = "";
  request("tableData").then(() => {
    loadingMap.tableData = false;
    let resItems = data.tableData ?? [];
    registrationList.value = [];
    let i = 0;
    if (resItems) {
      tagList.value = [];
      resItems.forEach((item) => {
        let entity = $api.pacs.registration.$$createEntity({});
        Object.assign(entity, item);

        let type = "info";
        if (i === 0) {
          type = "";
          selectTagRegistration.value = entity;
        }
        registrationList.value.push(entity);
        tagList.value.push({
          id: entity.id,
          name: entity.name,
          sex: entity.sex,
          age: entity.age,
          type: type,
        });
        i++;
      });
    }
  });
};
const tableProps = computed(() => {
  const { tableData } = toRefs(data);
  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value ?? [],
    columns: [
      {
        type: "selection",
        label: "序号",
        width: "60px",
      },
      adviceColumns[ERegistrationColumnKey.RegistrationStateLable],
      adviceColumns[ERegistrationColumnKey.PatientType],
      adviceColumns[ERegistrationColumnKey.InspectionNumber],
      adviceColumns[ERegistrationColumnKey.AdmissionNumber],
      adviceColumns[ERegistrationColumnKey.Name],
      adviceColumns[ERegistrationColumnKey.Sex],
      adviceColumns[ERegistrationColumnKey.Age],
      adviceColumns[ERegistrationColumnKey.DeviceName],
      adviceColumns[ERegistrationColumnKey.ProjectName],
      adviceColumns[ERegistrationColumnKey.ApplyOfficeName],
      adviceColumns[ERegistrationColumnKey.CreateTime],
    ],
    onRowClick: (row: any) => {
      selectTagRegistration.value = row;
      diagnosticOpinion.value = row.diagnosticOpinion;
      imageFindings.value = row.imageFindings;
    },
    highlightCurrentRow: true,
  };
  return tableProps;
});

//监听登记单选择改变
watch(
  () => props.selectItemTag,
  (item) => {
    disabled.value = true;
    editingObj.value = $api.pacs.registration.$$createEntity({});
    Object.assign(editingObj.value, item);
    if (item && item.id) {
      disabled.value = false;
      handleQueryData();
    }
  },
  {
    immediate: true,
  }
);
//监听登记单选择改变
watch(
  () => selectTagRegistration.value,
  (item) => {
    if (item && item?.id) {
      diagnosticOpinion.value = item.diagnosticOpinion;
      imageFindings.value = item.imageFindings;
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.pacs-history-caonclusion {
  padding-top: var(--mt-padding);
  display: flex;
  flex-direction: column;
  height: 100%;

  .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }

  .el-descriptions__label {
    display: inline-block;
    text-align: right;
    width: 70px;
    font-weight: 600;
    margin-right: var(--mt-margin);
    margin-top: var(--mt-margin);
  }

  .el-descriptions__content {
    color: var(--el-text-color-regular);
  }

  &-search {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;

    &-row {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    &-table {
      flex: 1;
    }
  }

  &-body {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
  }
}
</style>
